<template>
  <div class="user-views">
    <el-card class="user-views-card" shadow="hover">
      <template #header>
        <div class="card-header">
          <span>修改密码</span>
        </div>
      </template>
      <div class="user-profile">
        <el-form
          :model="state.form"
          :rules="rules"
          label-position="top"
          ref="formRef"
          @keyup.enter="onSubmit(formRef)"
        >
          <el-form-item label="旧密码" prop="oldPassword">
            <el-input
              v-model="state.form.oldPassword"
              placeholder="请输入现在密码"
              type="password"
              show-password
            />
          </el-form-item>
          <el-form-item label="新密码" prop="newPassword">
            <el-input
              v-model="state.form.newPassword"
              placeholder="请输入新密码"
              type="password"
              show-password
            />
          </el-form-item>
          <el-form-item label="确认新密码" prop="rawPassword">
            <el-input
              v-model="state.form.rawPassword"
              placeholder="请输入确认新密码"
              show-password
              type="password"
            />
          </el-form-item>
          <el-form-item class="submit-buttons">
            <el-button @click="onResetForm(formRef)">重置</el-button>
            <el-button
              type="primary"
              :loading="state.formSubmitLoading"
              @click="onSubmit(formRef)"
              >保存
            </el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-card>
  </div>
</template>
<script setup lang="ts">
import { reactive, ref, onMounted } from "vue";
import { useRouter } from "vue-router";
import { useUserInfo } from "@/store/userInfo"; //用户信息仓库
import type { FormInstance, FormRules } from "element-plus"; //form类型
import { ElNotification } from "element-plus";
import { Local } from "@/utils/storage";
import { ADMIN_INFO } from "@/store/constant/cacheKey";

const router = useRouter();
const formRef = ref<FormInstance>();
const userInfo = useUserInfo();

const state = reactive({
  formSubmitLoading: false,
  form: {
    oldPassword: "",
    newPassword: "",
    rawPassword: "",
  },
});

const rules = reactive<FormRules>({
  oldPassword: [{ required: true, message: "旧密码不能为空", trigger: "blur" }],
  newPassword: [
    { required: true, message: "新密码不能为空", trigger: "blur" },
    { min: 6, max: 20, message: "长度在 6 到 20 个字符", trigger: "blur" },
  ],
  rawPassword: [
    { required: true, message: "确认密码不能为空", trigger: "blur" },
    {
      required: true,
      validator: function (rule, value, callback) {
        if (state.form.newPassword !== value) {
          callback(new Error("两次输入的密码不一致"));
        } else {
          callback();
        }
      },
      trigger: "blur",
    },
  ],
});

//重置表单事件
const onResetForm = (formEl: FormInstance | undefined) => {
  state.form = { oldPassword: "", newPassword: "", rawPassword: "" };
};
//提交表单事件
const onSubmit = (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  formEl.validate((valid, fields) => {
    if (valid) {
      userInfo
        .updatePwdByUser({
          oldPassword: state.form.oldPassword,
          newPassword: state.form.newPassword,
        })
        .then((res:any) => {
          ElNotification({
            type: "success",
            message: "修改成功",
          });
          Local.remove(ADMIN_INFO);
          router.go(0);
        });
    } else {
      console.log("error submit!", fields);
    }
  });
};
</script>
<style lang="scss" scoped>
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.user-profile {
  width: 360px;
  max-width: 100%;
}

.change-password {
  width: 360px;
  max-width: 100%;
}

.submit-buttons :deep(.el-form-item__content) {
  justify-content: flex-end;
}
</style>
